<template>
  <div>
    <van-nav-bar
      title="黑马优购"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      placeholder=""
      fixed
      style="background-color:red;color:#fff;"
    />
    <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in goodInfo.pics " :key="index">
        <img v-lazy="item.pics_mid" style="width:375px;height:375px;">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息区域 -->
    <div class="box1">
      <div class="money">￥{{goodInfo.goods_price}}</div>
      <div class="xiangqing">
        <div class="left">{{goodInfo.goods_name}}</div>
        <div class="right">
          <van-icon name="star-o"/>
          <div>收藏</div>
        </div>
      </div>
      <div class="kuaidi">快递：免运费</div>
    </div>
    <div class="whilteline"></div>
    <div class="box2">
      <div style="line-height: 40px;">
        <span>促销:</span>
        <span style="color: #666;">满300元减30元</span>
      </div>
      <div style="line-height: 40px;">
        <span>已选:</span>
        <span style="color: #666;">黑色/S/1件</span>
      </div>
    </div>
    <div class="whilteline"></div>
    <div class="box3">
      <div>
        <span style="margin-right: 10px;">送至</span>
        <span style="color: #666;" @click="shouhuo">请选择收货地址</span>
      </div>
      <van-icon name="arrow"/>
    </div>
    <div class="whilteline"></div>
    <van-tabs v-model="active">
      <van-tab title="图文详情" v-html="goodInfo.goods_introduce"></van-tab>
      <van-tab title="规格参数">
        <van-row :key="i" v-for="(item,i) in goodInfo.attrs">
          <van-col :span="12">{{item.attr_name}}</van-col>
          <van-col :span="12" style="border-left:0px">{{item.attr_value}}</van-col>
        </van-row>
      </van-tab>
    </van-tabs>
    <!-- 底部 -->
    <van-goods-action style="z-index:100">
      <van-goods-action-icon icon="chat-o" text="客服"/>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="toCar"
        :badge="$store.getters.getAllCount"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCar(goodInfo)"/>
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodParams: {},
      goodInfo: {},
      active: 0
    };
  },
  async created() {
    this.getUrlParams();
    this.getGoodInfo();
  },
  methods: {
    //获取商品请求参数
    getUrlParams() {
      let paramsArr = location.hash.split("?")[1].split("=");
      let paramsObj = {};
      paramsObj.goods_id = paramsArr[1];
      this.goodParams = paramsObj;
    },
    //请求商品参数
    async getGoodInfo() {
      const res = await this.$http.get("/goods/detail", {
        params: this.goodParams
      });
      console.log(res);
      this.goodInfo = res.message;
    },
    //跳转到购物车
    toCar() {
      this.$router.push("/shopping");
    },
    //购物车 数据
    addCar(info) {
      let count = 0;
      count++;
      let obj = {
        id: info.goods_id,
        name: info.goods_name,
        pic: info.goods_small_logo,
        price: info.goods_price,
        selected: true,
        count
      };
      this.$store.commit("getGoodsList", obj);
    },
    shouhuo() {
      this.$router.push("/commit");
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar__title,
.van-nav-bar__text,
.van-icon-arrow-left::before {
  color: #fff;
  text-align: center;
}
.box {
  padding: 0 5px;
}
.money {
  font-size: 20px;
  color: red;
  margin: 20px 0;
}
.xiangqing {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.left {
  font-size: 13px;
  padding-right: 20px;
}
.right  {
  width: 100px;
  text-align: center;
  border-left: 1px solid #eee;
  font-size: 10px;
  top: -20px;
}
.kuaidi {
  font-size: 13px;
  color: #666;
  font-weight: 700;
  line-height: 40px;
}
.whilteline {
  border-bottom: 6px solid #efefef;
}
.box2 {
  font-size: 12px;
  padding: 0 10px;
  height: 80px;
}
.box3 {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  font-size: 12px;
  padding: 12px 10px 12px 10px;
}
.van-col {
  height: 66px;
  color: #000;
  padding: 25px 0 25px 10px;
  font-size: 12px;
  border: 1px solid #eee;
}
</style>